<div id="subContainer" class="wrapper wrapper-content">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>用户管理</h5>
            <div class="ibox-tools">
                <div class="ibox-tools">
                    <a :href="applicationContextRootPath + 'pages/user/add.html'"
                       data-pjax class="btn btn-primary btn-xs">新增</a>
                </div>
            </div>
        </div>
        <div class="ibox-content">
            <div class="row" style="margin-top: 20px;">
<!--                <div class="col-sm-3">-->
<!--                    <select class="form-control" v-model="searchParams.roleId">-->
<!--                        <option :selected="true" disabled value="">请选择角色</option>-->
<!--                        <option v-for="role in allRoles" :value="role.roleId">-->
<!--                            {{role.remark}}</option>-->
<!--                    </select>-->
<!--                </div>-->
<!--                <div class="col-sm-3">-->
<!--                    <select class="form-control" v-model="searchParams.companyId" >-->
<!--                        <option :selected="true" disabled value="">请选择公司</option>-->
<!--                        <option v-for="company in companyList" :value="company.id">-->
<!--                            {{company.name}}</option>-->
<!--                    </select>-->
<!--                </div>-->
<!--                <div class="col-sm-3">-->
<!--                    <select class="form-control" v-model="searchParams.grade">-->
<!--                        <option :selected="true" disabled value="">请选择访员级别</option>-->
<!--                        <option v-for="grade in gradeStatus" :value="grade.code">-->
<!--                            {{grade.name}}-->
<!--                        </option>-->
<!--                    </select>-->
<!--                </div>-->
                <div class="col-sm-3" v-for="(filter, index) in searchParams.filters" :key="index" v-if="filter.showAble">
                    <div class="input-group">
                        <input type="text" placeholder="请输入关键词" class="input-sm form-control search-input"
                               v-model="filter.fieldValue" v-bind:fieldName="filter.fieldName"
                               v-bind:fieldValue="filter.fieldValue"
                               v-bind:compare="filter.compare"
                               :disabled="filter.readonly"
                               @keyup.enter.native="search"
                               :placeholder="filter.placeholder" :readonly="filter.readonly" clearable>
                    </div>
                </div>
                <div class="input-group">
                            <span class="input-group-btn">
                                                <button type="button" class="btn btn-sm btn-primary"
                                                        v-on:click="pagequery()"> 搜索</button> </span>
            </div>
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>操作</th>
                        <th>用户账号</th>
                        <th>用户名称</th>
                        <th>用户角色</th>

                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item, index) in items">
                        <th scope="row">{{(searchParams.page - 1) * 10 + index + 1}}</th>
                        <td>
                            <button type="button" v-on:click="edit(item)" class="btn btn-success btn-xs">
                                编辑
                            </button>
                            <button type="button" v-on:click="resetPd(item)" class="btn btn-warning btn-xs">
                                重置密码
                            </button>
                            <button type="button" v-on:click="deleteItem(item)" class="btn btn-danger btn-xs">
                                删除
                            </button>
                        </td>
                        <td>{{item.loginName}}</td>
                        <td>{{item.userName}}</td>
                        <td>{{item.roleName}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <pageination :total="searchParams.total" :size="searchParams.pageSize" :page="searchParams.page"
                         :changge="pageFn"></pageination>
        </div>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">分配角色</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal m-t" id="signupForm">
                        <h3>可以分配的所有权限:</h3>
                        <div class="row">
                            <div class="col-sm-4" v-for="item in allRoles">
                                <label>
                                    <input type="checkbox" name="roleIds" :value="item.roleId" v-model="roleIds"/>
                                    {{item.remark}}
                                </label>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" v-on:click="saveRoles()">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>

<script src="/js/validateIsMain.js"></script>
<script>
    var vue = new Vue({
        el: '#subContainer',
        data: {
            applicationContextRootPath: '/',
            searchParams: {
                orderBy: 'create_at desc',
                page: 1,
                pageSize: 10,
                filters: [
                    {
                        showAble: true,
                        readonly: false,
                        placeholder: "请输入选项名称",
                        fieldName: "userName",
                        compare: "like",
                        fieldValue: ""
                    }
                ],
                isLock: ''
            },
            items: [{}],
            allRoles: [],  //   所有角色列表
            roleIds: [],
            companyList: [],//   所有公司列表
            gradeStatus: [],
            selected: null
        },
        created: function () {
            // this.loadAllRoles();
        },
        methods: {
            toCreateVosAccount(item) {
                confirm("您确定要给用户【"+ item.username +"】开通VOS账户吗?", "", function (isConfirm) {
                    if (isConfirm) {
                        console.log(item);
                        AJAX.POST_JSON('/system/vos/createCustomer', {account: "AC0000" + item.uid, name: item.username}, function (resp) {
                            toastr.success(resp.msg);
                        })

                    } else {
                        //after click the cancel
                    }
                }, {confirmButtonText: '确认', cancelButtonText: '取消', width: 400});
            },
            resetPd(item) {
                let that = this;
                confirm("您确定要重置用户【"+ item.userName +"】的密码吗?", "", function (isConfirm) {
                    if (isConfirm) {
                        console.log(item);
                        AJAX.POST_JSON('/api/sysUser/resetPasswd', {userId: item.userId}, function (resp) {
                            toastr.success(resp.msg);
                        })

                    } else {
                        //after click the cancel
                    }
                }, {confirmButtonText: '确认', cancelButtonText: '取消', width: 400});
            },
            pagequery: function () {
                let that = this;
                AJAX.POST_JSON('/api/sysUser/index', this.searchParams, function (resp) {
                    that.items = resp.data.records;
                    that.searchParams.pageNum = resp.data.pageNum;
                    that.searchParams.total = resp.data.total;
                })
            },
            pageFn: function (val) {
                this.searchParams.pageNum = val;
                    this.pagequery();
            },
            deleteItem(item) {
                var that = this;
                confirm("删除后，不可恢复，请确认?", "", function (isConfirm) {
                    if (isConfirm) {
                        console.log(item);
                        AJAX.DELETE('/api/sysUser', {id: item.userId}, function (resp) {
                            toastr.success(resp.msg);
                            that.pagequery();
                        })

                    } else {
                        //after click the cancel
                    }
                }, {confirmButtonText: '确认', cancelButtonText: '取消', width: 400});
            },
            edit(item) {
                toPage('pages/user/edit.html', item.userId);
            },
            applyRoles(item) {
                this.selected = item;
                // this.roleIds = this.roleIds.concat(item.roleIds)
                this.roleIds = item.roleIds;
                $("#myModal").modal('show');

            },
            // loadAllRoles() {
            //     var that = this;
            //     AJAX.GET('/api/system/sysRole/all/list', {}, function (resp) {
            //         that.allRoles = resp.data;
            //     })
            // },
            saveRoles() {
                AJAX.POST_JSON('/api/system/sysUser/roles',
                    {uid: this.selected.uid, roleIds: this.roleIds}
                    , function (resp) {
                        toastr.success(resp.msg);
                        $("#signupForm")[0].reset()
                        $("#myModal").modal('hide');
                    })
            },
        }
    });
</script>
